<template>
  <div class="banner">
    <!-- 轮播图组件 -->
    <van-swipe
      touchable
      :lazy-render="true"
      indicator-color="#FF8198"
      class="my-swipe"
      :autoplay="3000"
    >
      <van-swipe-item
        class="item"
        v-for="(item, index) in props.banner"
        :key="index"
      >
        <van-image
          @click="look(item)"
          height="300"
          fit="cover"
          lazy-load
          class="itemimg"
          :src="item"
        >
          <template v-slot:error>加载失败</template>
        </van-image>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>
<script setup="props">
import { ImagePreview } from "vant";

import { defineProps, reactive } from "vue";
const props = defineProps({
  banner: {
    type: Array,
    default: () => [],
  },
});
// 点击预览图片
const look = (item) => {
  ImagePreview(props.banner);
};
</script>

<style scoped>
.item {
  height: 300px;
}
</style>